<template>
  <view class="userPage">
    <view class="bgImg"></view>
    <view class="userPage-main">
      <view class="setUp">
        <view>
          <image src="@/static/icon/userPage/setUp.png" mode=""></image>
        </view>
      </view>
      <view class="user-info">
        <view class="user-avatar">
          <image src="@/static/icon/userPage/promotion2.png" mode=""></image>
        </view>
        <view class="user-main">
          <view>用户昵称</view>
          <view>个性签名文案</view>
        </view>
        <view class="user-set">
          <view>编辑资料</view>
          <u-icon name="arrow-right" color="#909090"></u-icon>
        </view>
      </view>
      <view class="user-member">
        <view class="member-top">
          <view class="member-title">
            <image src="@/static/icon/userPage/member.png" mode=""></image>
            会员中心
          </view>
          <view class="member-main">
            我的会员专辑
          </view>
          <view class="member-footer">
            已购专辑
            <u-icon name="arrow-right" color="#D9AB46;"></u-icon>
          </view>
        </view>
        <view class="member-botton" @click="onpromotion()">
          <view class="member-img">
            <image src="@/static/icon/userPage/species.png" mode=""></image>
          </view>
          <view class="member-nav">
            <view class="nav-top">1,503,000 金币</view>
            <view class="nav-bottom">可提现 1,000
              <u-icon name="arrow-right" color="#909090;"></u-icon>
            </view>
          </view>
          <view class="member-btn">充值</view>
        </view>
      </view>
      <view class="user-promotion">
        <view class="top">推广者中心</view>
        <view class="promotion-list">
          <view class="promotion-nav" v-for="item,index in promotionList" :key="index">
            <view class="presentation-icon">
              <image :src="item.icon" mode=""></image>
            </view>
            <view class="presentation-title">{{item.title}}</view>
          </view>
        </view>
      </view>
      <view class="user-more">
        <view class="top">更多功能</view>
        <view class="more-list">
          <view class="more-nav" v-for="item,index in moreList" :key="index">
            <view class="more-icon">
              <image :src="item.icon" mode=""></image>
            </view>
            <view class="more-title">{{item.title}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- <tab-bar currentSelect="myPage"></tab-bar> -->
  </view>
</template>

<script>
  export default {
    name: 'UserPage',
    data() {
      return {
        promotionList: [{
          icon: '../../static/icon/userPage/promotion1.png',
          title: '我要推广',
          code: 0
        }, {
          icon: '../../static/icon/userPage/promotion2.png',
          title: '我的邀请',
          code: 1
        }, {
          icon: '../../static/icon/userPage/promotion3.png',
          title: '推广钱包',
          code: 2
        }],
        moreList: [{
          icon: '../../static/icon/userPage/more1.png',
          title: '已购文章'
        }, {
          icon: '../../static/icon/userPage/more2.png',
          title: '提现明细'
        }, {
          icon: '../../static/icon/userPage/more3.png',
          title: '在线客服'
        }, {
          icon: '../../static/icon/userPage/more4.png',
          title: '作者申请'
        }, {
          icon: '../../static/icon/userPage/more5.png',
          title: '投诉举报'
        }]
      };
    },
    methods: {
      onpromotion() {
        uni.navigateTo({
          url: '/pages/userPage/wallet'
        })
      }
    },
  };
</script>

<style lang="less" scoped>
  .userPage {
    padding-top: var(--status-bar-height);
    position: relative;

    .userPage-main {
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    .setUp {
      display: flex;
      justify-content: flex-end;
      padding-top: 30rpx;
      box-sizing: border-box;
      position: sticky;

      :first-child {
        height: 42rpx;
        width: 42rpx;

        image {
          height: 42rpx;
          width: 42rpx;
        }
      }
    }

    .user-info {
      height: 136rpx;
      width: 100%;
      display: flex;
      align-items: center;
      z-index: 1;
      position: sticky;

      .user-avatar {
        height: 136rpx;
        width: 136rpx;
        border-radius: 50%;
        overflow: hidden;

        image {
          height: 136rpx;
          width: 136rpx;
        }
      }

      .user-main {
        flex: 1;
        margin-left: 22rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;
        position: sticky;

        :first-child {
          font-size: 36rpx;
          color: #313131;
        }
      }

      .user-set {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #909090;
        display: flex;
        align-items: center;
      }
    }

    .user-member {
      width: 100%;
      border-radius: 20rpx;
      margin-top: 40rpx;
      box-sizing: border-box;
      background: #fff;
      z-index: 1;

      position: sticky;

      .member-top {
        height: 78rpx;
        background: radial-gradient(circle, #FFEDBF 0%, #E6CF91 100%);
        box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
        opacity: 1;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        display: flex;
        align-items: center;

        .member-title {
          width: 208rpx;
          height: 78rpx;
          background: linear-gradient(174deg, #FFD88E 0%, #EAC26A 53%, #E2BB54 100%);
          border-radius: 20rpx 0 20rpx 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 32rpx;
          color: #FFFFFF;

          image {
            height: 37rpx;
            width: 37rpx;
            margin-right: 8rpx;
          }
        }

        .member-main {
          flex: 1;
          font-size: 28rpx;
          font-weight: 700;
          color: #D9AB46;
          margin-left: 16rpx;
        }

        .member-footer {
          width: 170rpx;
          height: 40rpx;
          background: #fff;
          box-shadow: 0rpx 2rpx 4rpx rgba(152, 93, 24, 0.09);
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #D9AB46;
          margin-right: 10rpx;
        }
      }

      .member-botton {
        width: 690rpx;
        height: 164rpx;
        display: flex;
        box-sizing: border-box;
        padding: 0 30rpx;
        align-items: center;

        .member-img {
          height: 96rpx;
          width: 96rpx;

          image {
            height: 96rpx;
            width: 96rpx;
          }
        }

        .member-nav {
          flex: 1;
          margin-left: 10rpx;

          .nav-top {
            font-size: 36rpx;
            color: #313131;
          }

          .nav-bottom {
            font-size: 24rpx;
            color: #909090;
            display: flex;
          }
        }

        .member-btn {
          width: 108rpx;
          height: 48rpx;
          background: rgba(255, 116, 43);
          border-radius: 8rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 48rpx;
        }
      }
    }

    .user-promotion {
      width: 100%;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 10rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      z-index: 1;
      position: sticky;

      .promotion-list {
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-top: 34rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .promotion-nav {
          display: flex;
          align-items: center;
          flex-direction: column;
        }

        .presentation-icon {
          height: 84rpx;
          width: 84rpx;

          image {
            height: 84rpx;
            width: 84rpx;
          }
        }

        .presentation-title {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #313131;
        }
      }
    }

    .user-more {
      width: 100%;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 10rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      z-index: 1;
      position: sticky;

      .more-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .more-nav {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 25%;
          margin-top: 40rpx;
        }

        .more-icon {
          height: 84rpx;
          width: 84rpx;

          image {
            height: 84rpx;
            width: 84rpx;
          }
        }

        .more-title {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #313131;
        }
      }
    }

    .top {
      font-size: 28rpx;
      font-weight: 500;
      color: #313131;
    }

    .bgImg {
      background: url(/static/img/userPage/userPage.png) no-repeat;
      position: absolute;
      background-size: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 750rpx;
      z-index: 0;
    }
  }
</style>